<template>
    <div>
        <OAMain title="通知列表">
            <el-card>
                <el-table :data="informs" stripe style="width: 100%">
                    <el-table-column prop="title" label="标题">
                        <template #default="scope">
                            <el-badge v-if="scope.row.reads.length == 0" is-dot class="item">
                                <RouterLink :to="{ name: 'detail', params: { pk: scope.row.id } }">
                                    {{ scope.row.title }}
                                </RouterLink>
                            </el-badge>
                            <RouterLink v-else :to="{ name: 'detail', params: { pk: scope.row.id } }">
                                {{ scope.row.title }}
                            </RouterLink>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布者">
                        <template #default="scope">
                            {{
                                "[" +
                                scope.row.author.department.name +
                                "]" +
                            scope.row.author.realname
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间">
                        <template #default="scope">
                            {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="可见部门">
                        <template #default="scope">
                            <el-tag v-if="scope.row.public" type="success">所有人可见</el-tag>
                            <el-tag v-else type="info" v-for="department in scope.row.departments" :key="department.id">
                                {{ department.name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button v-if="scope.row.author.uid == authStore.user.uid" icon="Delete" type="danger"
                                @click="onShowDialog(scope.$index)"></el-button>
                            <el-button v-else disabled type="default">不可操作</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <template #footer>
                    <OAPagination :total="pagination.total" v-model="pagination.page" />
                </template>
            </el-card>
        </OAMain>

        <OADialog title="删除通知" v-model="dialogVisible" @submit="onDeleteDialog">
            <span>确定要删除该通知吗？</span>
        </OADialog>
    </div>
</template>

<script setup name="ListInform">
import { ref, reactive, onMounted } from "vue";
import timeFormatter from "@/utils/timeFormatter";
import OAMain from "@/components/OAMain.vue";
import OAPagination from "@/components/OAPagination.vue";
import OADialog from "@/components/OADialog.vue";
import { useAuthStore } from "@/stores/auth";
import informHttp from "@/api/informHttp";
import { ElMessage } from "element-plus";

const authStore = useAuthStore();

let informs = ref([]);
const pagination = reactive({
    page: 1,
    total: 0,
});

let dialogVisible = ref(false);
let handleIndex = 0;

const onShowDialog = (index) => {
    handleIndex = index;
    dialogVisible.value = true;
};

const onDeleteDialog = async () => {
    try {
        let inform = informs.value[handleIndex];
        await informHttp.deleteInform(inform.id);
        informs.value.splice(handleIndex, 1);
        ElMessage.success("删除成功");
    } catch (detail) {
        ElMessage.error(detail);
    }
    dialogVisible.value = false;
};

onMounted(async () => {
    try {
        let data = await informHttp.getInformList(1);
        pagination.total = data.total;
        informs.value = data.results;
    } catch (detail) {
        ElMessage.error(detail);
    }
});
</script>

<style scoped>
.el-tag {
    margin-right: 5px;
    margin-left: 5px;
}

.el-badge {
    margin-top: 4px;
}

* { 
    text-decoration: none;
}
</style>
